<template>
<div id="demo">
     <h3>限时限量</h3>
    <ul>
        <li v-for="(v,i) in arr" :key="i">
            <router-link to="/xiangqing">
                <img :src="v.img" alt="">
                <div>
                     <p>{{v.text}}</p>
                <span>{{v.price}}</span>
                </div>
               
            </router-link>
        </li>
    </ul>
</div>
 
</template>

<script>
export default {
data() {
    return {
        arr:[
            {
                text:"Fresh馥蕾诗花妍舒缓面膜",
                price:"¥690.00",
                img:"xianshi/1.webp"
            },
            {
                text:"GUERLAIN法国娇兰帝皇蜂姿修护复原蜜",
                price:"¥760.00~1520.00",
                 img:"xianshi/2.webp"
            },
            {
                text:"LANCOME兰蔻小黑限定鸿愿礼盒",
                price:"¥760.00",
                 img:"xianshi/3.webp"
            }
        ]
    }
},
}
</script>

<style scoped>
#demo{
    width: 90%;
    height: 2.5rem;
    margin: 5% auto;
}
ul{
    border-radius: 0.1rem;
    border: 1px solid gainsboro;
     height: 2rem;
     margin-top: 0.15rem;
     position: relative;
     font-size: 0.14rem;
}
li{
    float: left;
   
}
li:first-child{
    width:40% ;
    height: 1.7rem;
    border-right: 1px solid gainsboro;
    margin-top: 0.2rem;
}
li:first-child img{
    display: block;
    margin:0  auto 0.1rem;
    width: 0.9rem;
    height: 0.9rem;
}
li:nth-child(2),li:nth-child(3){
   width:56% ;
   height: 1rem; 
   margin-left: 0.1rem;
}
 li:first-child div{
    margin-left: 10%;
}
li:nth-child(2) img,li:nth-child(3) img{
  width: 0.56rem;
    height: 0.56rem;
    margin-top: 0.2rem;  
}
li:nth-child(2) div{
  width: 40%;
  height: 0.7rem;
  position: absolute;
  right: 0;
  top:0.2rem 
}
li:nth-child(3) div{
  width: 40%;
  height: 0.7rem;
  position: absolute;
  right: 0;
  top:1.1rem 
}
span{
    color: red;
}
</style>